<%- include ("../shared/header.ejs") %>

<!-- intro -->
<section class="row">
    <div class="col-md-6 intro">
        <h1>Fake Store API</h1>
        <p> Fake store rest API for your e-commerce or shopping website prototype</p>
        <div class="btns">
            <a class="btn btn-large btn-primary" target="_blank" rel="noopener noreferrer"
                href="https://github.com/keikaavousi/fake-store-api">View on GitHub <img src="/icons/github.svg"></a>
            <a class="btn btn-large btn-secondary" href="/docs">Read Docs <img src="/icons/book.svg"></a>
        </div>
    </div>
    <div class="col-md-6 intro-img">
        <img src="/icons/intro.svg" />
    </div>
</section>


<!-- about -->
<section class="row about">
    <h3 class="center-align col-md-12">Get tired of Lorem ipsum data?!</h3>
    <h3 class="center-align col-md-12">Didn't you find any free e-commerce API?!</h3>
    <p class="center-align">
        fakeStoreApi is a free online REST API that you can use whenever you need Pseudo-real data for your e-commerce
        or shopping website without running any server-side code. It's awesome for teaching purposes, sample codes,
        tests, etc.
    </p>
</section>


<!-- tryit -->
<section id="try" class="row">
    <h2 class="heading">Example Code</h2>
    <pre><code>fetch('https://fakestoreapi.com/products/1')
            .then(res=>res.json())
            .then(json=>console.log(json))</code></pre>
    <button id="fetch_btn" class="btn btn-primary">Try it</button>
    <pre id="result"><code></code></pre>
</section>


<!-- resources-->
<section class="row">
    <h2 class="heading">Resources</h2>
    <p>There are 4 main resources need in shopping prototypes</p>
    <ul class="list">
        <li><a href="/products">Products</a><span>20 products</span></li>
        <li><a href="/carts">Cart</a>20 cart item</li>
        <li><a href="/users">Users</a>10 users</li>
        <li><a href="">Login Token</a><span class="badge">New!</span></li>
    </ul>
    <a href="/docs" class="btn btn-primary">View Details on Docs</a>
</section>


<!--routes-->
<section class="row">
    <h2 class="heading">Routes</h2>
    <p>All HTTP methods are supported</p>
    <ul class="list">
        <li><span>GET</span><a href="/products">/products</a></li>
        <li><span>GET</span><a href="/products/1">/products/1</a></li>
        <li><span>GET</span><a href="/products/categories">/products/categories</a></li>
        <li><span>GET</span><a href="/products/category/jewelery">/products/category/jewelery</a></li>
        <li><span>GET</span><a href="/cart?userId=1">/cart?userId=1</a></li>
        <li><span>GET</span><a href="/products?limit=5">/products?limit=5</a></li>
        <li><span>POST</span>/products</li>
        <li><span>PUT</span>/products/1</li>
        <li><span>PATCH</span>/products/1</li>
        <li><span>DELETE</span>/products/1</li>
    </ul>
    <a href="/docs" class="btn btn-primary">View Details on Docs</a>
</section>

<script>
    let wrapper = document.querySelector('#result code')
    let loading = document.createElement('span')
    loading.className = "loading"

    document.getElementById("fetch_btn").addEventListener('click', function () {
        wrapper.appendChild(loading)
        fetch('https://fakestoreapi.com/products/1')
            .then(res => res.json())
            .then(json => {
                wrapper.textContent = JSON.stringify(json, undefined, 2)
            })
    })
</script>
<%- include ("../shared/footer.ejs") %>